<template>
  <div>
    <div class="top">
      <span class="fu" @click="fun()">&lt;</span>
      <span class="i">支付管理</span>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="er">
        <span class="xia">快捷支付解绑</span>
        <span>禁止开通快捷支付</span>
    </div>
    <div class="san">
        <span>授权账户 6222***2222</span>
        <span class="san-a">储蓄账户</span>
        <span class="san-b">∧</span>
    </div>
    <div class="si">
        <input type="checkbox">
        <span class="si-b">宝付网络科技(上海)有限公司</span>
        <span class="si-a">已开通</span>
    </div>
    <div class="si">
        <input type="checkbox">
        <span class="si-b">财付通</span>
        <span class="si-a">已开通</span>
    </div>
    <div class="si">
        <input type="checkbox">
        <span class="si-b">支付宝(中国)网络技术有限公司</span>
        <span class="si-a">已开通</span>
    </div>
    <div class="si">
        <input type="checkbox">
        <span class="si-b">广州唯品会网络技术有限公司</span>
        <span class="si-a">已开通</span>
    </div>
    <div class="si">
        <input type="checkbox">
        <span class="si-b">京东支付</span>
        <span class="si-a">已开通</span>
    </div>
    <div class="si">
        <input type="checkbox">
        <span class="si-b">通联支付网络服务股份有限公司</span>
        <span class="si-a">已开通</span>
    </div>
    <div>
        <span class="wu-a">温馨提示</span>
        <p>"解除绑定"后将无法在对应商户使用快捷支付功能</p>
        <p>"已中止"的账户授权，您可通过"解除绑定"先解约，解约后可正常使用</p>
    </div>
    <div class="di">解除绑定</div>
  </div>
</template>

<script>
export default {
methods:{
    fun(){
        this.$router.go(-1)
    }
}
}
</script>

<style scoped lang="scss">
.top {
  background-color: #2d6cb9;
  color: white;
  display: flex;
  height: .6rem;
  .i {
    display: block;
    margin-left: 1.04rem;
    line-height: .6rem;
    font-size: .2rem;
  }
  .fu {
    font-size: .36rem;
    margin-left: .16rem;
    line-height: .6rem;
  }
  ul {
    // float:right;
    // line-height: .6rem;
    position: absolute;
    right: .1rem;
    top: .26rem;
  }
  li {
    width: .08rem;
    height: .08rem;
    border-radius: 50%;
    float: left;
    background-color: white;
    margin-right: .06rem;
    list-style: none;
  }
}
.er{
    height: .5rem;
     display: flex;
     border: .01rem solid rgba(128, 128, 128, 0.296);
     span{
        text-align: center;
        line-height: .5rem;
        flex: 1;
        border-right: .01rem solid rgba(128, 128, 128, 0.268);
     }
     .xia{
        border-bottom: .02rem solid #2d6cb9;
     }
}
.san{
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content:space-around;
    span{
        line-height: .5rem;
    }
    .san-a{
        color: gray;
        font-size: .14rem;
    }
    .san-b{
        color: #2d6cb9;
        font-size: .22rem;
    }
}
.si{
    height: .5rem;
    background-color: #f0f3f8;
    display: flex;
    justify-content:space-between;
    text-align: center;
    border-bottom: .01rem solid rgba(128, 128, 128, 0.282);
    input{
        margin-left: .3rem;
    }
    span{
        margin-left: .16rem;
    }
    .si-b{
        color: black;
        font-size: .16rem;
        line-height: .5rem;
    }
    .si-a{
        font-size: .12rem;
        color:gray;
        margin-right: .16rem;
        line-height: .5rem;
    }
}
.wu-a{
    color: gray;
    height: .42rem;
    font-size: .16rem;
    margin-left: .16rem;
    line-height: .42rem;
}
p{
    color: rgba(128, 128, 128, 0.684);
    font-size: .14rem;
    margin-left: .16rem;
    margin-bottom: .08rem;
}
.di{
    width: 2.3rem;
    height: .36rem;
    font-size: .2rem;
    border: .02rem solid #2d6cb9;
    color: #2d6cb9;
    border-radius: .2rem;
    text-align: center;
    line-height: .36rem;
    position: absolute;
    bottom: .2rem;
    left: .72rem;
}
</style>